import React,{useState} from 'react';


interface Props {
    userName:string
}

export const HelloComponent:React.FC<Props> = function(props) {

    return (
      <div>
        {props.userName}
      </div>
    )
}


interface NameEdit {
    initialUserName:string,
    onNameUpdated:(newName:string) => void
}

export const NameEditComponent:React.FC<NameEdit> = function(props) {

    const [name,setName] = useState(props.initialUserName);

    function onChange(e:any) {
        setName(e.target.value);
    }
    function onNameSubmit() {
        props.onNameUpdated(name);
    }
    return (
        <div>

            <label>Update name:</label>
            <input type="text" value={name} onChange={onChange} />
            <button onClick={onNameSubmit} >Change</button>
        </div>
    )
}

